<template>
	<div style="background-color: #000;min-height: 100vh;color: #fff;">
		<div style="position: relative;height:4em;overflow: hidden;">
			<div style="position:absolute;top: 0;left: 0;right: 0;height: 7em;background-color: #fff;opacity: 0.5;"></div>
			<div style="position: absolute;left: 1.0em;top: 0px;"><image :src="imgHttp + '/test/bg/logo.png'" style="height: 4em;width: 7em;"></image></div>
		</div>
		<div @click="toIndex" style="display: flex;justify-items: center;margin: 0.5em;">
			<div><image :src="imgHttp + '/test/back.png'" style="width: 1.5em;height:1.5em;"></image></div>
			<div style="font-size: 1em;">返回首页</div>
		</div>
		
		<div class="daItem" v-for="(item,index) in this.objs" :key="index">
			<div style="text-align: center;font-size: 1.5em;margin-bottom: 0.6em;margin-top: 0.4em;">漆面膜电子质保详情</div>
			<div class="titleDiv">
				车主信息
			</div>
			<div class="row">
				<div class="inputlable">质保编号</div>
				<div class="inputright">
					{{ item.quQualityNum }}
			    </div>
				<div class="inputlable">车主姓名</div>
				<div class="inputright">
					{{item.quName}}
			    </div>
				<div class="clear"></div>
			</div>
			<div class="row">
				<div class="inputlable">车主手机</div>
				<div class="inputright">
					{{item.quPhone}}
			    </div>
				<div class="inputlable">品牌车型</div>
				<div class="inputright">
					{{item.quModel}}
			    </div>
				<div class="clear"></div>
			</div>
			<div class="row">
				<div class="inputlable">车牌号</div>
				<div class="inputright">
					{{item.quLicencePlate}}
			    </div>
				<div class="inputlable">车架号</div>
				<div class="inputright">
					{{item.quVin}}
			    </div>
				<div class="clear"></div>
			</div>
			<div class="titleDiv" style="margin-top: 0.5em;">
				系列信息
			</div>
			<div class="row">
				<div class="inputlable">系列</div>
				<div class="inputright">
					{{item.prModel}}
			    </div>
				<div class="inputlable"></div>
				<div class="inputright">
					
			    </div>
				<div class="clear"></div>
			</div>
			<div class="titleDiv" style="margin-top: 0.5em;">
				施工信息
			</div>
			<div class="row">
				<div class="inputlable">施工门店</div>
				<div class="inputright">
					{{item.quShopName}}
			    </div>
				<div class="inputlable">施工日期</div>
				<div class="inputright">
					{{item.quBuildTime}}
			    </div>
				<div class="clear"></div>
			</div>
			<div class="row">
				<div class="inputlable">质保年限</div>
				<div class="inputright">
					{{item.quAgeLimit}}
			    </div>
				<div class="inputlable">价格</div>
				<div class="inputright">
					{{item.quPasteMoney}}
			    </div>
				<div class="clear"></div>
			</div>
			
			<div class="titleDiv" style="margin-top: 0.5em;" v-if="item.quPic!=null">
				施工图
			</div>
			<div class="row" v-if="item.quPic!=null">
				<image :src="http + item.quPic" style="width: 15em;height: 12em;"></image>
			</div>
			
		</div>
		
		
		
	</div>
</template>

<script>
	import api from '@/common/httprequest.js'
	export default {		
		data() {
			return {
				imgHttp: api.getImgUrl(),
				http:api.getUrl(),
				obj:{},
				objs:[]
			}
		},
		onLoad(options) {
			 const jsonStr = decodeURIComponent(options.data);
			 this.objs = JSON.parse(jsonStr);
			 //alert(JSON.stringify(this.objs));
		},
		mounted() {
			
		},
		methods: {
			toIndex(){
				uni.switchTab({
					url: '../index/index'
				})
			},
			loadData(){			
				uni.showLoading({
					title: '数据处理中...'
				});
				api.request({
					method: "GET",
					url: "/applet/guarantee/select",
					params:{"quPhone":null},
				}).then(res => {	
					uni.hideLoading();
					alert(JSON.stringify(res));
				
					if (res.code == 200) {
						
					}
				});	
			}
		}
	}
</script>

<style>
	.titleDiv{
		border-bottom: 1px solid #9D9D9D;
		width: 90%;margin: 0 auto;
		padding-bottom: 0.1em;
	}
	.daItem{
		background-color: #C4C4C4;
		margin-left: 0.2em;
		margin-right: 0.2em;
		border-radius: 10px;
		padding-bottom: 1.2em;
		padding-top: 0.1em;
	}
	.inputright{
		float: left;
		margin-left: 0.5em;
		width:calc(50% - 8em);
		font-size: 0.8em;
		text-align: left;
	}
	.inputlable{
		float: left;
		min-width: 6em;
		color: #797979;
		/*background-color: #F5F5F5;*/
		text-align: right;
		font-size: 0.8em;
	}
	.row{
		text-align: center;
		font-size: 1.0em;
		margin-top: 0.4em;
		overflow: hidden;
	}
	.clear{
		clear: both;
	}
</style>